<!-- 用户设置 -->
<template>
	<view class="info">
		<view class="set-item" @click="updateAvatar()">
			<view class="set-item-label">
				<text>头像</text>
			</view>
			<view class="set-item-value">
				<view class="avatar" @click.stop="previewAvator($store.getters.userInfo.img)">
					<lazy-load-image :image="$store.getters.userInfo.img" :avator="true" :errorImg="config.errorImage.avator" imgMode='aspectFill' height="112rpx" borderRadius="59" />
				</view>
				<icon class="iconfont icon">&#xe7d3;</icon>
			</view>
		</view>
		<navigator class="set-item" :url="`/subpages/user-consumer/set/nickname/nickname?nickname=${$store.getters.userInfo.nickname}`" :hover-stop-propagation="true">
			<view class="set-item-label">
				<text>昵称</text>
			</view>
			<view class="set-item-value">
				<input class="input" type="text" disabled :value="$store.getters.userInfo.nickname">
				<icon class="iconfont icon">&#xe7d3;</icon>
			</view>
		</navigator>
		<view class="set-item" @click="goAuth()">
			<view class="set-item-label">
				<text>账号认证</text>
			</view>
			<view class="set-item-value">
				<icon class="iconfont icon">&#xe7d3;</icon>
			</view>
		</view>
		<view class="set-item" @click="toogleRole()">
			<view class="set-item-label">
				<text>角色切换</text>
			</view>
			<view class="set-item-value">
				<icon class="iconfont icon">&#xe7d3;</icon>
			</view>
		</view>
	</view>
	<view class="ft">
		<button type="default" class="btn" hover-class="btnClickStyle" @click="loginOut()">退出登录</button>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import { useStore } from 'vuex';
	import useStatus from '@/common/hooks/useStatus.js';
	import { uploadImg } from "@/subpages/common/api/upload.js";
	import { updateAvator, updateImInfos } from "@/subpages/common/api/customer/info.js";
	import { showModal } from '@/common/hooks/useShow.js';
	import config from '@/uni.config.js';
	const store = useStore();
	const { loginOut, toogleRole, goAuth } = useStatus();
	const avatarError = ref(false);
	// 监听是否去认证
	uni.$on('GOAUTH', () => {
		setTimeout(() => {
			goAuth();
		}, 200)
	});
	// 更换头像
	function updateAvatar(avatar) {
		uni.chooseImage({
			count: 1,
			crop: {
				width: 600,
				height: 600
			},
			success(res) {
				const size = (+res.tempFiles[0].size / 1024 / 1024);
				if (size > 2) {
					showModal({
						content: '建议上传小于5M尺寸为100*100的图片',
						showCancel: false
					})
				} else {
					let data = [{
						type: 'head',
						fileUrl: res.tempFiles[0].path
					}]
					uploadImg(data).then(async uploadRes => {
						updateImInfos({ faceurl: uploadRes[0].src });
						await updateAvator({
							avatar: uploadRes[0].src
						});
						store.dispatch('app/init');
					}).catch(error => {});
				}
			}
		})
	}
	// 查看头像
	function previewAvator(url) {
		if (!url) return uni.showToast({
			icon: 'none',
			title: '无头像'
		})
		uni.previewImage({
			urls: [url]
		})
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		background-color: $bgColor;
	}
</style>
<style scoped lang="scss">
	@import '@/subpages/common/css/set.scss';
	.info, .ft {
		margin: 28rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;
	}
	.ft {
		.btn {
			height: 110rpx;
			line-height: 110rpx;
			background-color: #fff;
			font-size: 32rpx;
			color: #000;
		}
	}
</style>
